/**
 * time: 2025-09-16
 * author: XJ
 * description: 资金拨付
 */

import { PageContainer } from '@ant-design/pro-components';
import { Button, Checkbox, DatePicker, Form, Input, InputNumber, message, Popconfirm, Radio, Row, Select, Steps, TreeSelect } from 'antd';
import { Col } from 'antd/lib';
import dayjs from 'dayjs';
import area from '@/components/staticFile/region_options.json';
import product from '@/components/staticFile/product_options.json';
import TextArea from 'antd/es/input/TextArea';
import chinaEconomy from '@/components/staticFile/industry_classification_options.json';
import { useModel } from '@umijs/max';
import DigitalFormModal from './sureModal';
import { companyFourNext, programSave } from '@/services/apis/companyRegister';
import { useEffect, useState } from 'react';

// 统一样式常量，与前序页面保持一致
const COMMON_FIELD_STYLE = { width: '100%', height: 40, borderRadius: 4 };
const FORM_LAYOUT = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
    layout: 'horizontal' as const,

    size: 'middle' as const,
};

const SetpNewFour: React.FC = (props) => {

    const { initialState, setInitialState } = useModel('@@initialState');
    const { stepProps, setStepProps } = useModel('DigitalizationManager.stepProps');
    const { dataGlobal, setDataGlobal } = useModel('DigitalizationManager.dataGlobal');
    const [buttonDisabled, setButtonDisabled] = useState<boolean>(true)
    const {
        modalProps,
        setModalProps,
    } = useModel("DigitalizationManager.modal")
    const [form] = Form.useForm();

    const onFinish = () => {
        form.validateFields().then(values => {
            programSave({
                ...values,
                "companyId": (initialState?.currentUser as any).data.id,
                projectId: dataGlobal.setpThree.projectId
            }).then(res => {
                const { code } = res;
                if (code == "0") {
                    //message.success("保存成功")
                }
            })
        })

    };

    useEffect(() => {
        form.setFieldsValue(dataGlobal.stepFourData)
        if (dataGlobal.stepFourData?.isPerformanceEvaluated &&
            dataGlobal.stepFourData?.isRunning &&
            dataGlobal.stepFourData?.isThrough &&
            dataGlobal.stepTwoDisabled &&
            dataGlobal.stepThreeDisabled
        ) {
            setButtonDisabled(false)
        }
    }, [dataGlobal.stepFourData])

    const onValuesChange = (values: any) => {
        const formVlaue = form.getFieldsValue()
        if (Object.values(formVlaue).filter(item => item).length == 4 && dataGlobal.stepTwoDisabled &&
            dataGlobal.stepThreeDisabled) {
            setButtonDisabled(false)
        } else {
            setButtonDisabled(true)
        }
    }

    const nextConfirm = async () => {
        setModalProps({ visible: true })

    }

    const cancelNextConfirm = async () => {
        const values = await form.validateFields();
        const saveStatus = await programSave({
            ...values,
            "companyId": (initialState?.currentUser as any).data.id,
            projectId: dataGlobal.setpThree.projectId
        })
        if (saveStatus.code == "0") {
            companyFourNext({
                companyId: dataGlobal.setpThree.companyId, projectId: dataGlobal.setpThree.projectId
            }).then(res => {
                const { code } = res;
                if (code == "0") {
                    setStepProps((prev) => ({ ...stepProps, current: prev.current + 1 }))
                    setDataGlobal(prev => ({ ...prev, stepFourData: values, setpFourDisabled: true }))
                }
            })
        }
    }

    return (
        <div
            style={{
                padding: '20px',
                boxSizing: 'border-box',
                backgroundColor: '#f8f9fa',
                height: '100%',
                overflow: 'hidden',
            }}
        >
            <div
                style={{
                    backgroundColor: '#fff',
                    padding: '20px',
                    borderRadius: 8,
                    boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
                    height: '100%',
                    overflowY: 'auto',
                }}
            >
                <Form disabled={dataGlobal.setpFourDisabled} onValuesChange={onValuesChange} form={form} {...FORM_LAYOUT} >

                    <div style={{ marginBottom: 24 }}>

                        <div
                            style={{
                                fontSize: 16,
                                fontWeight: 500,
                                color: '#1f2937',
                                marginBottom: 12,
                            }}
                        >
                            项目实施
                        </div>
                        <Form.Item
                            label="预计验收时间"
                            name={"checkPlan"}
                            // rules={[{ required: true, message: '请选择预约诊断时间' }]}
                            style={{ marginBottom: 20 }}
                            getValueProps={(value) => ({ value: value && dayjs(value) })}
                        >
                            <DatePicker />
                        </Form.Item>
                        <Form.Item
                            name="isPerformanceEvaluated"
                            label="系统开发"
                            style={{ marginBottom: 20 }}
                            valuePropName="checked"
                        >
                            <Checkbox />
                        </Form.Item>
                        <Form.Item
                            name="isRunning"
                            label="上线试运行"
                            style={{ marginBottom: 20 }}
                            valuePropName="checked"
                        >
                            <Checkbox />
                        </Form.Item>
                        <Form.Item
                            name="isThrough"
                            label="系统验收"
                            style={{ marginBottom: 20 }}
                            valuePropName="checked"
                        >
                            <Checkbox />
                        </Form.Item>
                        {/* 提交按钮 */}
                        <Form.Item label={null} style={{ marginTop: 40, textAlign: 'center' }}>
                            <Button style={{ marginRight: 10 }} type="primary" onClick={onFinish}>
                                暂存
                            </Button>
                            <Popconfirm
                                title="是否需要修改项目备案"
                                okText="是"
                                cancelText="否"
                                onCancel={() => cancelNextConfirm()}
                                onConfirm={() => nextConfirm()}
                            >
                                <Button disabled={buttonDisabled || dataGlobal.setpFourDisabled} type="primary">
                                    下一步
                                </Button>
                            </Popconfirm>

                        </Form.Item>
                    </div>
                </Form>
            </div>
            <DigitalFormModal />
        </div>
    );
};

export default SetpNewFour;
